<template>
  <div>
    <el-drawer
      v-model="drawerVisible"
      :with-header="true"
      :before-close="handleClose"
      :show-close="false"
      size="800"
      class="advancedSearch"
    >
      <template #header>
        <span class="text-size-16px">高级筛选</span>
        <el-button
          style="cursor: pointer"
          text
          type="primary"
          @click="handleClose"
        >
          <el-icon><CaretRight /></el-icon>收起
        </el-button>
      </template>
      <slot></slot>
    </el-drawer>
  </div>
</template>

<script setup name="AdvancedSearch">
import { reactive, getCurrentInstance, watchEffect } from 'vue'
const props = defineProps({
  advancedSearchParam: {
    required: true,
    type: Object
  }
})

const data = reactive({
  dialogParam: {}, //弹出框下拉框 设置传递的参数变量
  drawerVisible: props.advancedSearchParam.drawerVisible
})

const { dialogParam, drawerVisible } = toRefs(data)

watchEffect(() => {
  drawerVisible.value = props.advancedSearchParam.drawerVisible
})
const emit = defineEmits(['closeAdvancedSearch'])
function handleClose() {
  emit('closeAdvancedSearch')
}
</script>

<style lang="scss">
// 高级筛选 --头部样式
.advancedSearch.el-drawer {
  .el-drawer__header {
    background-color: #f5f5f5 !important;
    color: #000;
    font-weight: 900;
    border-bottom: 1px solid rgba(233, 233, 233, 1);
    padding: 10px 20px 10px;
  }
}
</style>
